<template>
  <div class="data-chart">
    <h2>静态数据图表</h2>
    <canvas id="myStaticChart"></canvas>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js'

Chart.register(...registerables) // 注册所有可用的组件

export default {
  mounted() {
    this.renderChart()
  },
  methods: {
    renderChart() {
      const ctx = document.getElementById('myStaticChart').getContext('2d')
      new Chart(ctx, {
        type: 'bar', // 图表类型
        data: {
          labels: ['标签1', '标签2', '标签3'],
          datasets: [
            {
              label: '数据集',
              data: [12, 19, 3], // 静态数据
              backgroundColor: 'rgba(54, 162, 235, 0.2)',
              borderColor: 'rgba(54, 162, 235, 1)',
              borderWidth: 1
            }
          ]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.data-chart {
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>
